input{
    
}

.show{
    animation: show-turn 2s ease-in forwards;
}

.hide{
    /* opacity: 0.5; */
    animation: hide-turn 2s ease-out forwards;
}

@keyframes hide-turn {
 0%{
     opacity: 1;
     color: green;
 }
 50%{
     opacity: 0.5;
     color: blue;
 }
 100%{
     opacity:0;
 }
}

@keyframes show-turn {
    0%{
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: yellow;
    }
    100%{
        opacity:1;
    }
   }